<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>姓名案例_计算属性实现</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>

<!--
    computed和watch之间的区别：
      1.computed能完成的功能，watch都能完成
      2.watch能完成的功能，computed不一定能完成。例如：watch可以进行异步操作
    两个重要的小原则：
      1.所被Vue管理的函数，最好写成普通函数，这样this的指向才是vm或组件实例对象
      2.所有不被Vue所管理的函数（定时器的回调函数、ajax的回调函数、Promise的回调函数等），
        最好写成箭头函数，这样this的指向才是vm或组件实例对象
-->

<div id="root">
  姓：<input type="text" v-model="firstName"><br/><br/>
  名：<input type="text" v-model="lastName"><br/><br/>
  全名：<span>{{fullName}}</span>

</div>
</body>
<script type="text/javascript">
  Vue.config.productionTip = false//阻止vue在启动时产生生产提示
  Vue.config.keyCodes.huiche = 13
  new Vue({
    el: "#root",
    data: {
      firstName: '张',
      lastName: '三',
      fullName:'张-三'
    },
    computed: {
     //  完整写法
     /* fullName: {
        // 当有人读取 fullName时，get就会被调用，且返回值就作为 fullName的值
        // get什么时候调用？1.初次读取fullName时；2.所依赖的数据发生变化时
        get() {
          return this.firstName + '-' + this.lastName
        },
        // 当fullName被修改时，set就会被调用
        set(value){
          const arr=value.split('-')
          this.firstName=arr[0]
          this.lastName=arr[1]
        }
      }*/
      //   简写——只读不改才能简写
     /* fullName (){
        return this.firstName + '-' + this.lastName
      }*/
    },
    watch:{
      firstName(newValue,oldValue){
        setTimeout(()=>{
          this.fullName=newValue+'-'+this.lastName
        },1000)
      },
      lastName(newValue,oldValue){
        this.fullName=this.firstName+'-'+newValue
      }
    },
    methods: {},

  })

</script>
</html>